<template>
  <div class="header clearfix">
      <img src="../assets/images/logo.png" class='pull-left logo'>
      <div class="items pull-right clearfix">
        <div class="item" :class='{"active":active && active == 1}' @click='tourl("official")'>首页</div>
        <div class="item" :class='{"active":active && active == 2}' @click='tourl("story")'>创作历程</div>
        <div class="item" :class='{"active":active && active == 3}' @click='tourl("history")'>关于毕云涛</div>
<!--         <div class="item el-dropdown-link" :class='{"active":active && active == 4}'>
          <el-dropdown>
            <span class="el-dropdown-link">
              业务体系<i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item><span @click='tourl("bfzs")'>百分之三</span></el-dropdown-item>
              <el-dropdown-item><span @click='msg("小豆丁")'>小豆丁</span></el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div> -->
        <div class="item" @click='tourl("join")' :class='{"active":active && active == 5}'>加入我们</div>
        <div class="item" @click='tourl("link")' :class='{"active":active && active == 6}'>联系我们</div>
      </div>
  </div>
</template>

<script>
export default {
  props:['skin','active'],
  methods:{
    msg(a){
      this.$notify.info({
        title: '抱歉',
        message: `${a} APP正在极速开发中`,
        type: 'success'
      });
    },
    tourl(url){
      tools.router.push({path:url})
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang='scss'>
  .header{
    font-family: "Helvetica Neue", "Hiragino Sans GB", STHeiti, "Microsoft YaHei", "\9ED1\4F53", Arial, sans-serif, "微软雅黑" !important;
    min-width: 1200px;
    width: 100%;
    height: 100px;
    background: rgba(128, 216, 208,.3);
    position: absolute;
    padding: 0 10%;
    z-index: 999;
    top: 0;
    border-bottom: 4px solid rgba(0,0,0,.1);

    .logo{
      width: 100px;
    }

    &.black{
      background: #fff !important;
      .items{
        .item{
          border-right: 2px solid #000;
          color: #000;
          &:hover{
            color: rgba(0,0,0,.5);
          }
          span{
            color: #000;
          }
        }
      }
    }

    img{
      // width: 214px;
      // height: 63px;
      margin-top: 18px;
    }

    .items{
      margin-top: 40px;
      .item{
        cursor: pointer;
        position: relative;
        display: inline-block;
        padding: 0 29px;
        border-right: 2px solid #fff;
        color:#fff;
        height: 22px;
        line-height: 22px;
        font-size: 14px;
        span{
          color: #fff;
          font-size: 14px !important;
          i{
            font-size: 10px;
          }
        }

        &:hover{
          color: #86AAFF !important;
          span{
            color: #86AAFF !important;
          }
        }

        &:last-child{
          border-right: none;
        }

        &.active{
          color: #000;
          span{
            color: #000 !important;
          }
        }
      }
    }

  }

  .el-dropdown-menu{
    // top: 60px !important;
  }
</style>
